<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-friendadd"></i>新增类目
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="wp_700">
        <div class="title">
          <h2>创建新闻分类</h2>
        </div>
        <div class="form_div">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            label-position="left"
          >
            <el-form-item label="分类名称" prop="name">
              <el-input type="text" v-model.trim="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="分类排序" prop="sort">
              <el-input type="number" :min="1" v-model.trim="ruleForm.sort"></el-input>
            </el-form-item>
            <div class="mr10">
              <el-button type="primary" @click="submitForm('ruleForm')">创建分类</el-button>
              <el-button type="danger" @click="resetForm('ruleForm')" >重置</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from "../../http/api.js";
export default {
  data() {
    var nameYZ = (rule, value, callback) => {
      ///^[A-Za-z0-9\u4e00-\u9fa5]+$/; 汉字格式，英文字母格式，数组。不能有符号
      const regGZ = /^[A-Za-z\u4e00-\u9fa5]+$/;
      if (!value) {
        return callback(new Error("分类名称不能为空"));
      }
      if (!regGZ.test(value)) {
        callback(new Error("请输入正确的分类名称"));
      } else {
        callback();
      }
    };

    var sortYZ = (rule, value, callback) => {
      const regGZ =/^[1-9][0-9]{0,3}$/
      if (!value) {
        callback();
      }
      if (!regGZ.test(value)) {
        callback(new Error("请输入正确的序号"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        sort: ""
      },
      rules: {
        name: [{  validator: nameYZ, trigger: "blur" }],
        sort: [{  validator: sortYZ, trigger: "blur" }]
      },
      Token: sessionStorage.getItem("Token"),
     
    };
  },
  methods: {
    
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$post(api.class_add,{
            token:this.Token,
            classify_name:this.ruleForm.name,
            classify_sort:this.ruleForm.sort
          })
          .then(res=>{
            if(res.status=="0"){
               this.$message({ type: "success", message: "创建成功" });
               setTimeout(() =>{                
                this.$router.go(0);//刷新当前页面
              }, 2000);
            }
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style scoped>
ul li {
  list-style: none;
}
.wp_700 {
  width: 700px;
  height: 700px;
  margin: 0 auto;
}
.title {
  text-align: center;
  padding-bottom: 20px;
}
.title h2 {
  font-size: 20px;
  color: #409eff;
}
.mr10{
    text-align: center;
}
.el-form-item  .el-form-item__content{
    margin-left: 0px;
}

</style>
